<template>
  <XcDrawer class="comp-taskdetail" ref="drawer" :title="$t('page.schedule.taskdetail.title')" :width="840" :closable="true" :closeconfirm="false">
    <TaskItem :task="task" />

    <Divider orientation="left" size="small" class="mt-30 fb">{{$t('page.schedule.taskdetail.preTask')}}</Divider>
    <TaskItem v-if="preTask" :task="preTask" />
    <Card v-else dis-hover> {{$t('norecord')}} </Card>

    <Divider orientation="left" size="small" class="mt-30 fb">{{$t('page.schedule.taskdetail.afterTask')}}</Divider>
    <Carousel v-if="afterTasks.length>0" dots="none">
      <CarouselItem v-for="t in afterTasks" :key="t.no">
        <TaskItem :task="t" />
      </CarouselItem>
    </Carousel>
    <Card v-else dis-hover> {{$t('norecord')}} </Card>
  </XcDrawer>
</template>
<script>
  import XcDrawer from '@/components/xcdrawer'
  import TaskItem from './taskitem'
  export default {
    name: 'comp-taskdetail',
    components: { XcDrawer, TaskItem },
    data() {
      return {
        task: '',
        preTask: '',
        afterTasks: [],
      }
    },
    methods: {
      show(task) {
        this.task = task
        this.$refs.drawer.show()
        this.loadNearTask()
      },
      loadNearTask() {
        if (!this.task.no) return
        this.$md.dispatch('schedule_task_near', { data: this.task.no }).then(data => {
          if (data.retCode === 1) {
            let preTask = data.preTask || ''
            preTask && this.handleTask(preTask)
            let afterTasks = data.afterTasks || []
            for (let i in afterTasks) {
              this.handleTask(afterTasks[i])
            }
            this.preTask = preTask
            this.afterTasks = afterTasks
          }
        })
      },
      handleTask(task) {
        task.isOver = (task.status === 'FINISHED' || task.status === 'FAILED' || task.status === 'EXECUTING')
      }
    }
  }
</script>
<style scoped>
  .list-title {
    min-width: 100px;
    font-weight: 600;
  }
</style>
